<template>
  <div>
    <div id="info">
      <!-- <div v-for="(ele, inx) in data" :key="inx" class="page-break"> -->
      <img v-if="type === '1'" src="@/assets/logo/fy-content-logo.png" width="100%" />
      <img v-else src="@/assets/logo/fmsx-content-logo.png" width="100%" />
      <h2 align="center" style="font-weight: bold; margin-top: 20px">入库申请单</h2>
      <div class="row" style="margin-bottom: 20px; width: 1000px">
        <span style="display: flex">
          <span style="width: 100px">{{ $t('print.EnterBound.supplier') }}：</span>
          <fmsxSelect
            class="editShow"
            v-model="data.supplierName"
            type="srmInfo"
            :prop="{ label: 'supplierName', value: 'supplierName' }"
            :defaultData="supplier"
          />
          <span class="printShow">{{ data.supplierName }}</span>
        </span>
        <span
          >{{ $t('print.date') }}：<a-date-picker
            class="editShow"
            v-model="data.date"
            valueFormat="YYYY-MM-DD"
            format="YYYY-MM-DD"
            :allowClear="false"
          />
          <span class="printShow">{{ data.date }}</span>
        </span>
        <span>NO：{{ data.entryOrderNum }}</span>
      </div>
      <table class="gridtable" width="100%" border>
        <tr>
          <th style="width: 40px; padding: 5px">{{ $t('print.no') }}</th>
          <th style="width: 150px">{{ $t('mtlCode') }}</th>
          <th style="width: 150px">{{ $t('mtlName') }}</th>
          <th style="width: 150px">{{ $t('print.spec') }}</th>
          <th style="width: 60px">{{ $t('unitName') }}</th>
          <th style="width: 60px">{{ $t('print.num') }}</th>
          <th style="width: 60px">{{ $t('print.price') }}</th>
          <th style="width: 60px">{{ $t('print.amount') }}</th>
          <th style="width: 160px">{{ $t('workOrderNo') }}</th>
          <th style="width: 100px">{{ $t('remarkTxt') }}</th>
        </tr>
        <tr v-for="(item, index) in data.recordList" v-bind:key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.materialCode }}</td>
          <td>{{ item.materialName }}</td>
          <td>{{ item.model }}</td>
          <td>{{ getAssStatus(item.consUnit) }}</td>
          <td>{{ item.entryQuantity }}</td>
          <td>{{ item.ratePrice }}</td>
          <td>{{ item.entryTotalPrice }}</td>
          <td>{{ item.moNum }}</td>
          <td>{{ item.remark }}</td>
        </tr>
      </table>
      <div class="row" style="width: 1000px; color: #000000; margin-top: 30px">
        <span>{{ $t('print.EnterBound.deliverer') }}：</span>
        <span>{{ $t('print.examination') }}：</span>
        <span>{{ $t('print.EnterBound.consignee') }}：{{ userInfo.realname }}</span>
      </div>
      <!-- </div> -->
    </div>
    <iframe id="ifrmae" style="display: none" />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'otherOutbound',
  data() {
    return {
      visible: false,
      data: {
        recordList: []
      },
      date: '',
      type: '1',
      supplier: [],
      supplierName: ''
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  created() {
    this.date = moment(new Date()).format('YYYY-MM-DD')
  },
  methods: {
    getDwg(value) {
      const list = value.split('_')
      if (list.length === 1) {
        return list[0]
      }
      const str = []
      list.forEach((el, i) => {
        if (i < list.length - 1) {
          str.push(el)
        }
      })
      return str.join('_')
    },
    moment,
    onPrint() {
      const head_str =
        '<!doctype html>\n' +
        '<html lang="en">\n' +
        ' <head>\n' +
        '  <style>\n' +
        `
        .page-break{ page-break-after: always; }
        table {
          border-spacing: 0;
          border-collapse: collapse;
          width: 1000px;
          table-layout: fixed;
        }
        td {
          height: 28px;
          line-height: 28px;
          padding-left: 5px;
          text-align: center;
        }
        .header {
          border: none;
        }
        .top-border {
          border-top: 1px solid #000;
        }
        .shight {
          height: 33px;
          line-height: 33px;
        }
        .title {
          font-weight: 400;
        }
        .btitle {
          font-size: 1.8rem;
        }
        .center {
          text-align: center;
        }
        .body > td{
          line-height: 33px;
          height: 33px;
        }
        .footer > td {
          line-height: 35px;
          height: 35px;
        }
        .top-title {
          padding-right: 5px;
          text-align: right;
        }
        p {
          margin: 0 0 0 5px;
        }
        .remark {
          line-height: 10px !important;
          font-size: 12px !important;
          word-wrap:break-word
        }
        .row {
          display: flex;
          justify-content: space-between;
        }
        .editShow {
          display: none;
        }
        .barCode {
          display: flex;
          justify-content: center;
        }` +
        '  </style>\n' +
        ' </head>\n' +
        ' <body style="font-size: 18px;">'
      const foot_str = '<script>window.print()<\/script></body></html>' //生成尾部
      const dTabel = document.getElementById('info')
      const body_str = dTabel.innerHTML
      const dIfrmae = document.getElementById('ifrmae')
      dIfrmae.setAttribute('srcdoc', head_str + body_str + foot_str)
    },
    getAssStatus(name) {
      let item = this.$dicData.getDicDataItem('cons_unit', name)
      return item.text
    },
    setData(data, type) {
      this.data = data
      this.type = type
      this.supplierName = data.supplierId_dictText
      this.supplier = [{ supplierName: data.supplierId_dictText }]
    }
  }
}
</script>

<style scoped>
.page-break {
  page-break-after: always;
}
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #000;
  border-collapse: collapse;
}
table.gridtable tr {
  height: 32px;
}
table.gridtable th {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  text-align: center;
}
table.gridtable td {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  text-align: center;
}
.pdf-content {
  width: 100%;
  overflow: hidden;
}
.pdf-box {
  width: 300%;
  height: 500px;
}
.row {
  display: flex;
  justify-content: space-between;
}
.printShow {
  display: none;
}
</style>
